<template>
  <page-loading
    class="list"
    :loading.sync="pageLoading"
    :error.sync="pageError"
    :enable-pull-refresh="false"
    @reload="getData"
  >
    <photo-item
      v-for="item in photos"
      :key="item.doc_id"
      :title="item.description"
      :cover-path="item.pictures[0].img_src"
      :view="item.view"
      :comment="item.comment"
      :count="item.count"
      :allParams="item"
    />
  </page-loading>
</template>

<script>
import PageLoading from '@/components/page-loading/PageLoading.vue'
import PhotoItem from '@/components/photo-item/PhotoItem.vue'
import { apiGetPhotos } from '@/api/space.js'
import pageLoadingMixin from '@/mixins/pageLoading'
export default {
  name: 'SpacePhotos',
  components: {
    PhotoItem,
    PageLoading
  },
  mixins: [pageLoadingMixin],
  props: {
    mid: {
      type: [Number, String],
      required: true
    }
  },
  data () {
    return {
      photos: null
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      apiGetPhotos({
        uid: this.mid
      }).then(res => {
        const { code, data } = res
        if (code === 0 && data !== null) {
          const { items } = data
          this.photos = items
        } else {
          this.pageError = true
        }
      }).catch(err => {
        console.log(err)
        this.pageError = true
      }).finally(() => {
        this.pageLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .list{
    padding: {
      left: rem(5px);
      right: rem(5px);
    };
  }
</style>
